<template>
  <div>
    <div class="title_box">
      <div class="iconfont icon-left" @click="$router.go(-1)"></div>
      <div class="title"></div>
      <div
        class="iconfont icon-gouwuche"
        @click="$router.push('/shoppingCar')"
      ></div>
    </div>
    <div class="occupy"></div>
    <!-- <Return></Return> -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in goodsData.goodsImgs"
          :key="index"
        >
          <img :src="item.pics_mid" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="price-content">
      <div class="price">
        <div class="price-now">{{ goodsData.goodsPrice }}</div>
        <div class="price-old">
          <del class="original">￥{{ goodsData.goodsPriceOld }}</del>
          <span class="tag">优惠价</span>
        </div>
      </div>
      <div class="goods-name">{{ goodsData.goodsName }}</div>
      <div class="postage">
        <p>免运费</p>
        <p>广东广州</p>
      </div>
    </div>

    <div class="component-bar">
      <div class="item">72小时发货</div>
      <div class="item">7天无理由退货</div>
      <div class="item">
        延误必赔
        <span class="iconfont icon-you"></span>
      </div>
    </div>
    <div class="component-bar height64">
      <div class="item">
        开通白富美，0首付，可分期！
        <div class="fr">
          免费开通
          <span class="iconfont icon-you"></span>
        </div>
      </div>
    </div>
    <div class="component-bar height64">
      <div class="item">
        请选择：颜色 尺码
        <div class="fr">
          <span class="iconfont icon-you"></span>
        </div>
      </div>
    </div>

    <div class="goodsDetails" id="test">
      <!-- <h5>商品详情</h5> -->
      <div v-html="goodsData.goodsDetails"></div>
    </div>

    <div class="tabBar-box">
      <div class="occupy"></div>
      <div class="tabBar">
        <div class="item">店铺</div>
        <div class="item">客服</div>
        <div class="item" @click="handleCollection">{{ Collected }}</div>
        <div class="item" @click="addToCart">加入购物车</div>
        <div class="item" @click="goConfirmation">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
// import Return from './comm/Return.vue';
export default {
  data() {
    return {
      goodsData: [],
      isCollected: false, // 是否收藏
      Collected: "收藏",
    };
  },
  methods: {
    api() {
      return "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=";
    },
    // 获取数据
    getDetailFun() {
      let id = this.$route.query.goods_id;
      axios.get(this.api() + id).then((data) => {
        // id、名称、价格、轮播图、详情、参数、商品图片
        let {
          goods_id,
          goods_name,
          goods_price,
          pics,
          attrs,
          goods_introduce,
          goods_big_logo,
        } = data.data.message;
        this.goodsData = {
          id: goods_id,
          goodsName: goods_name,
          goodsImgs: pics,
          goodsPrice: goods_price,
          goodsPriceOld: goods_price + 1000,
          goodsDetails: goods_introduce,
          goodsParameters: attrs.slice(0, 3),
          goodsLogo: goods_big_logo,
        };
      });
    },
    // 加入购物车
    addToCart() {
      // id、名称、价格、商品图片、状态
      let { id, goodsName, goodsPrice, goodsLogo } = this.goodsData;
      let addCar = {
        id,
        goodsName,
        goodsPrice,
        goodsLogo,
        num: 1,
        status: 0,
      };
      this.$store.commit("addGoods", addCar);
      Toast.success("加购成功");
    },
    // 立即购买
    goConfirmation() {
      let { id, goodsName, goodsPrice, goodsLogo } = this.goodsData;
      let addCar = {
        id,
        goodsName,
        goodsPrice,
        goodsLogo,
        num: 1,
        status: 0,
      };
      this.$store.commit("checkGoodsFun", addCar);
      this.$router.push("/confirmation");

    },
    // 收藏
    handleCollection() {
      Toast.success("收藏成功");
      this.$store.commit("collected", this.goodsData.id);
    },
  },
  created() {
    this.getDetailFun();
    this.$store.commit("footprintFun", this.$route.query.goods_id);
  },
  // components:{
  //   Return
  // }
};
</script>

<style lang="less" scoped>
.tabBar-box {
  .occupy {
    width: 100%;
    height: 72px;
  }
  .tabBar {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 72px;
    line-height: 72px;
    border-top: 1px solid #ededed;
    background: #fff;
    display: flex;
    .item {
      text-align: center;
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        flex: 1;
        font-size: 14px;
        color: #666;
        border-right: 1px solid #ededed;
      }
      &:nth-child(4) {
        flex: 2;
        color: #ff5777;
        background: #ffe6e8;
        font-size: 20px;
      }
      &:nth-child(5) {
        flex: 2;
        color: #fff;
        background: #ff4a89;
        font-size: 20px;
      }
    }
  }
}
.component-bar {
  // width: 100%;
  height: 54px;
  line-height: 54px;
  margin: 10px 0px;
  background: #fff;
  display: flex;
  justify-content: center;
  font-size: 16px;
  padding: 0px 18px;
  color: #666;
  .item {
    flex: 1;
    .iconfont {
      float: right;
      margin-left: 10px;
    }
  }
}
.price-content {
  background: #fff;
  padding: 14px 18px;
  color: #333;
  .price {
    overflow: hidden;
    .price-now {
      float: left;
      font-size: 50px;
      position: relative;
      margin-left: 15px;
      &::before {
        display: block;
        content: "￥";
        font-size: 20px;
        font-weight: bolder;
        position: absolute;
        left: -15px;
        top: 4px;
      }
    }
    .price-old {
      float: left;
      margin-left: 10px;
      .original {
        font-size: 16px;
        color: #999;
      }
      .tag {
        display: block;
        font-size: 14px;
        color: #ff2255;
        background: #ffe8ee;
      }
    }
  }
  .goods-name {
    width: 432px;
    font-size: 20px;
  }
  .postage {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #999;
    height: 50px;
    line-height: 50px;
  }
}
.occupy{
  width: 100%;
  height: 74px;
}
.title_box {
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 7px 0px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-around;
  div:nth-child(odd) {
    flex: 1;
    font-size: 36px;
  }
  .title {
    flex: 6;
    font-size: 34px;
  }
}
.swipe {
  .my-swipe {
    .van-swipe-item {
      height: 400px;
      img {
        width: 100%;
      }
    }
  }
}
.goodsDetails {
  h5 {
    // margin-bottom: -10px;
    margin-top: 20px;
    text-indent: 1em;
    font-size: 26px;
  }
  div {
    .lazyimg p:first-of-type {
      display: none;
    }
  }
}
.fr {
  float: right;
}
.height64 {
  height: 64px;
  line-height: 64px;
  font-size: 18px;
}
</style>
